<template>
	<view>
		<view class='bg-set'></view>
		<view class='login'>
			<view class='logo'>
				<image src='/static/login.png'></image>
			</view>
			<view class='form'>
				<input type="text" v-model="phone" class='input' placeholder="请输入手机号" placeholder-class="placeholder">
			</view>
			<view class='form'>
				<input type="digit" controlled="true" v-model='code' class='codeinput'  placeholder="请输入验证码" placeholder-class="placeholder">
				<view :class="disabled ? 'huoquzhong' : 'huoqu'" @click="get_code">{{ time }}{{ text }}</view>
			</view>
			<view class='form'>
				<input type="text" v-model="password" class='input' :password="show" placeholder="请输入密码" placeholder-class="placeholder">
				<sunui-password @change="showPass" />
			</view>
			<checkbox-group @change="choose">
			<view class='info1'>
				<label class="radio" ><checkbox :value="isCheck" color="#0066ff" style="float:left;transform:scale(0.7)" /><view style='float:left;'>我已阅读并同意</view><view style='float:left;color:#0066ff;'>《用户协议》</view><view style='float:left;color:#0066ff;'>《隐私政策》</view></label>
			</view>
			</checkbox-group>
			<view class='btn'>
				<view class='button' :class="[rtrues()]"  @click='save'>注册</view>
				<view class='desc' @click='goto("/pages/login/login")'>已有账号？去登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	import sunuipassword from '../../components/sunui-password/sunui-password.vue'
	export default {
		components: {
			sunuipassword
		},
		data() {
			return {
				phone:'',
				isCheck:'1',
				isCheckEd:false,
				code:'',
				password:'',
				show: true,
				text: '获取验证码',
				time: '',
				disabled: false,
				rules: {
					password: {
						rule: /^[0-9a-zA-Z]{1,16}$/,
						msg: "密码应该为1-16位"
					},
					phone: {
						rule: /^1[3456789]\d{9}$/,
						msg: "手机号格式错误"
					},
					code: {
						rule: /^[0-9]{4}$/,
						msg: "请输入6位数字验证码"
					}
				},
				phone:'',
				code:'',
				password:'',
				machineCode:'',
				
			}
		},
		onLoad() {
		},
		methods: {
			rtrues(){
				console.log(this.isCheckEd)
				if(this.isCheckEd){
					return 'isCheckEd'
				}
			},
			choose(e){
				console.log(e.detail.value);
				if(e.detail.value.length > 0){
					this.isCheckEd=true;
				}else{
					this.isCheckEd=false;
				}
			},
			showPass(e) {
				console.log(e);
				this.show = e;
			},
			validate(key){
				let bool=true;
				if(!this.rules[key].rule.test(this[key])){
					//提示信息
					uni.showToast({
						title:this.rules[key].msg,
						icon:'none'
					})
					//取反
					bool=false;
					return false;
				}
				return bool;
			},
			goto(url){
				uni.navigateTo({
					url:url
				})
			},
			async get_code() {
				if (this.disabled) {
					return;
				}
				if(!this.validate('phone')) return;
				uni.showLoading({title: '发送中',mask:true});
				uni.request({
					url:'你的发送短信验证码的接口',
					data:'接口参数',
					method:'post',   //get、post、delete
					success:re=>{
						setTimeout(function () {
							uni.hideLoading();
						}, 100);
						console.log(re)
						if(re.data.code==0){
							this.disabled = true;
							this.setInterValFunc();//开启倒计时
						}else{
							uni.showToast({
								title:re.data.msg,
								icon:"none"
							})
						}
					}
				})
			},
			setInterValFunc() {
				this.time = 60;
				this.text = '秒';
				this.setTime = setInterval(() => {
					if (this.time - 1 == 0) {
						this.time = '';
						this.text = '重新获取';
						this.code = '';
						this.disabled = false;
						clearInterval(this.setTime);
					} else {
						this.time--;
					}
				}, 1000);
			},
			save(){
				if(!this.validate('phone')) return;
				if(!this.validate('code')) return;
				if(!this.validate("password"))  return;
				uni.showLoading({title: '注册中',mask:true});
				uni.request({
					url:'你的注册接口',
					data:'接口参数',
					method:'post',   //get、post、delete
					success:re=>{
						setTimeout(function () {
							uni.hideLoading();
						}, 100);
						console.log(re);
						if(re.data.code==0){
							uni.showToast({
								title:'注册成功'
							})
							setTimeout(function () {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							}, 1000);
						}else{
							uni.showToast({
								title:re.data.msg,
								icon:'none'
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.bg-set{
	    position: fixed;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	    z-index: -1;
		background: #FFFFFF;
	}
	.login{
		width:90%;
		margin:0 auto;
		color:#FFFFFF;
	}
	.login .logo{
		margin-top:100rpx;
		width:100%;
		height:300rpx;
		text-align: center;
	}
	.login .logo image{
		width:200rpx;
		height:200rpx;
	}
	.login .info{
		width:100%;
		height:40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 30rpx;
	}
	.login .form{
		width:100%;
		height:100rpx;
		background-color: #FFFFFF;
		/* margin-top:40rpx; */
		/* border-radius: 40rpx; */
		border-bottom: 1px solid #F2F2F2;
	}
	.login .form .left{
		width:100rpx;
		height:100rpx;
		line-height: 100rpx;
		float:left;
		color:#807E7E;
		text-align: center;
	}
	.login .form .next{
		float:left;
		width: 8px;
		height: 8px;
		border-top: 2px solid #807E7E;
		border-right: 2px solid #807E7E ;
		transform: rotate(135deg);
		margin-top:35rpx;
		margin-left:20rpx;
		margin-right:20rpx;
	}
	.login .form .right{
		height:100rpx;
		float:left;
	}
	.login .form .right .logininput{
		width:90%;
		margin:0 auto;
		height:100rpx;
		line-height: 100rpx;
		color:#000000;
	}
	.login .form .codeinput{
		width:60%;
		margin:0 auto;
		height:100rpx;
		line-height: 100rpx;
		color:#000000;
		float:left;
		margin-left:5%;
	}
	.login .form .fasong{
		width:30%;
		height:100rpx;
		line-height: 100rpx;
		float:right;
		color:#0066FF;
		text-align: center;
		font-size: 26rpx;
	}
	.login .form .huoqu {
		width:30%;
		height:100rpx;
		line-height: 100rpx;
		float:right;
	    font-size: 26rpx;
		text-align: center;
	    font-family: PingFangSC-Regular, PingFang SC;
	    font-weight: 400;
		color:#0066FF;
	}
	.login .form .huoquzhong {
		width:30%;
		height:100rpx;
		line-height: 100rpx;
		float:right;
	    font-size: 26rpx;
	    font-family: PingFangSC-Regular, PingFang SC;
	    font-weight: 400;
		text-align: center;
	    color: #807E7E;
	}
	.login .form .input{
		width:75%;
		margin:0 auto;
		height:100rpx;
		line-height: 100rpx;
		color:#000000;
		float:left;
		margin-left:5%;
	}
	.placeholder{
		font-size: 26rpx;
		color:#807E7E;
		line-height: 60rpx;
	}
	.login .forget{
		text-align: right;
		width:100%;
		height:80rpx;
		line-height: 80rpx;
		font-size: 26rpx;
	}
	.login .info1{
		color:#807E7E;
		font-size: 24rpx;
		text-align: left;
		width:100%;
		height:100rpx;
		line-height: 100rpx;
	}
	.btn{
		width:90%;
		margin:0 auto;
		margin-top:20rpx;
		text-align: center;
		font-size: 26rpx;
	}
	.btn .button{
		background-color: #ECECEC;
		width:100%;
		height:80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		color:#FFFFFF;
	}
	.btn .desc{
		width:100%;
		height:80rpx;
		line-height: 80rpx;
		color:#807E7E;
	}
	.btn .isCheckEd{
		background-color: #0066ff;
		width:100%;
		height:80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		color:#FFFFFF;
	}
</style>
